<template>
  <hm-layout>
    <view class="container">
      <view class="container-inner mine-page">
        <div id="rewards" style="">
          <div class="desc wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
            <h3>温馨提示：</h3>
            <p>推广用户购买你可获得 20% 佣金（可提现）。</p>
            <p>你下级的下级购买再获得5%佣金</p>
          </div>
          <div class="link wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
            <span>推荐链接</span>
            <p id="url">{{ url }}</p>
            <div class="copy" @click="copy"></div>
          </div>
        </div>
      </view>
    </view>
  </hm-layout>
</template>

<script setup>
  import { computed } from 'vue'
  let userInfo = uni.vk.getVuex('$user.userInfo')
  let url = `https://haimi-ai-1302621554.cos.ap-nanjing.myqcloud.com/AI/index.html#/?t=${userInfo.my_invite_code}`
  import mineNav from '/pages/components/mine-nav'
  const copy = () => {
     let text = `AI艺术字批量底图工具，你上传一张空白底图（不带姓氏或谐音词），工具帮你自动填充文字，自动下载，省事省力。\n 最多支持下载500姓氏，一次性生成500张带姓氏底图。\n 现在购买优惠巨大，详情点击链接查看，记住用电脑打开\n  ${url}`
     uni.setClipboardData({
        data: text,//要被复制的内容
        success:()=>{//复制成功的回调函数
          uni.showToast({//提示
            title:'复制成功'
          })
        }
      });
  }
</script>

<style lang="scss">
  .container {
    padding: 30px;

    .container-inner {
      width: 1300px;
      margin: auto;
      
      .desc {
          color: #5e656f;
          font-size: 16px;
          h3 {
              font-size: 16px;
              color: #f57286;
          }
      }
      .link {
          margin: 20px 0;
          display: flex;
          font-size: 14px;
          color: #53565d;
          span {
              width: 86px;
              height: 37px;
              background: #fff;
              border: 1px solid #e5e7eb;
              border-radius: 5px 0 0 5px;
              display: flex;
              align-items: center;
              justify-content: center;
          }
          p {
              height: 37px;
              display: flex;
              align-items: center;
              justify-content: center;
              padding-left: 14px;
              padding-right: 40px;
              border-top: 1px solid #e5e7eb;
              border-bottom: 1px solid #e5e7eb;
          }
          .copy {
              cursor: pointer;
              width: 51px;
              height: 37px;
              background: #fff url('../../static/copy.png') no-repeat center center/20px auto;
              border: 1px solid #e5e7eb;
              border-radius: 0 5px 5px 0;
          }
      }
    }
  }
</style>